<template>
  <div class="template-list">
    <ul class="content">
      <li v-for="(item, index) in list" :key="index" class="item" :class="{ active: item.status }">
        <div class="checkbox">
          <a-checkbox v-model:checked="item.status" @change="checkboxChange(item)"></a-checkbox>
        </div>

        <div style="display: flex; align-items: center">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ item.name }}</span>
            </template>
            <div class="hiddenText">{{ item.name }}</div>
          </a-tooltip>
        </div>

        <!-- <div class="id">{{ item.id }}</div> -->
        <div class="type">{{ item.type == 1 ? '简易报价模式' : '专业报价模式' }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import * as tempalteApi from '@/api/template.ts'
import { message } from 'ant-design-vue'

const emit = defineEmits([])

const props = defineProps({
  list: Array,
  templateType: String,
})

const { list, templateType } = toRefs(props)

onMounted(() => {
  getList()
})

// 模板列表
const getList = async () => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await tempalteApi.getSimpleTemplateList({ type: templateType.value })
    if (state === 200) {
      listCopy.value = data.map(item => {
        item.isRemarkShow = false
        item.status = false

        return item
      })
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求发送失败1~')
  }
}

const checkboxChange = item => {
  console.log('item', item)
}
defineExpose({
  getList,
})
</script>

<style lang="less" scoped>
.template-list {
  .content {
    text-align: center;

    width: 100%;
    li:nth-child(n + 2) {
      margin-top: 5px;
    }
    li {
      list-style: none; /* 简写形式 */
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      // background-color: blue;
      background: rgba(255, 255, 255, alpha);
      padding: 20px;
      box-sizing: border-box;
    }
    .active {
      background: rgba(186, 224, 255, 0.2);
    }
  }
  .btn {
    margin-top: 20px;
    text-align: center;
    padding: 0 80px;
  }
}
</style>
